const RIGHT_BAR_HEIGHT = 20; // 右侧每一类的 bar 的高度（固定）
const RIGHT_ITEM_HEIGHT = 60; // 右侧每个子类的高度（固定）
const LEFT_ITEM_HEIGHT = 50 // 左侧每个类的高度（固定）
var base = getApp();
Page({
  data: {
    // constants: [], // 数据
    toView: null, // 左 => 右联动 右scroll-into-view 所需的id
    currentLeftSelect: null, // 当前左侧选择的
    eachRightItemToTop: [], // 右侧每类数据到顶部的距离（用来与 右 => 左 联动时监听右侧滚动到顶部的距离比较）
    leftToTop: 0,
    milktea: [],
    currentTab:0,
    avg_score: 0,
    comments: [],
    yellow_star:0, // 黄色五角星，默认一开始是黄色星星0分
    gray_star:5, // 灰色五角星 灰色星星是5颗 表示是5分
    star_per:0, // 自定义长度黄色五角星  一开始需要打的是0分
  },
  // 显示详细信息
  showDetail: function (e) {
    var selectedMilkteaId = e.currentTarget.dataset.id
    wx.request({
      url: 'http://192.168.166.182:8080/selectOneMilktea',
      data: {
        id: selectedMilkteaId
      },
      success: (result) => {
        // 跳转到奶茶详情页面
        wx.navigateTo({
          url: '../goodDetail/goodDetail?milktea=' + JSON.stringify(result.data),
        })
      }
    })
  },
  // 得到每个分类
  getEachRightItemToTop: function () { // 获取每个右侧的 bar 到顶部的距离，用来做后面的计算。
    var obj = {};
    var totop = 0;
    obj["id1"] = totop // 右侧第一类肯定是到顶部的距离为 0
    for (let i = 1; i < (base.globalData.milktea.length + 1); i++) { // 循环来计算每个子类到顶部的高度
      totop += (RIGHT_BAR_HEIGHT + base.globalData.milktea[i - 1].category.length * RIGHT_ITEM_HEIGHT)
      obj[base.globalData.milktea[i] ? base.globalData.milktea[i].id : 'last'] = totop // 这个的目的是 例如有两类，最后需要 0-1 1-2 2-3 的数据，所以需要一个不存在的 'last' 项，此项即为第一类加上第二类的高度。
    }
    return obj
  },
  rightScroll: function (e) { // 监听右侧的滚动事件与 eachRightItemToTop 的循环作对比 从而判断当前可视区域为第几类，从而渲染左侧的对应类。
    for (let i = 0; i < base.globalData.count_type; i++) {
      let left = this.data.eachRightItemToTop[base.globalData.milktea[i].id]
      let right = this.data.eachRightItemToTop[base.globalData.milktea[i + 1] ? base.globalData.milktea[i + 1].id : 'last']
      if (e.detail.scrollTop < right && e.detail.scrollTop >= left) {
        this.setData({
          currentLeftSelect: base.globalData.milktea[i].id,
          leftToTop: LEFT_ITEM_HEIGHT * i
        })
      }
    }
  },
  jumpTo: function (e) { // 左侧类的点击事件，点击时，右侧会滚动到对应分类
    this.setData({
      toView: e.target.id || e.target.dataset.id,
      currentLeftSelect: e.target.id || e.target.dataset.id
    })
  },
  // 顶部栏转换
  swichTab: function (e) {
    console.log(e)
    var that = this;
    if (this.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.currentTarget.dataset.current,
        showOrderPage: e.currentTarget.dataset.current === 0 // 当currentTab为0时，显示点菜页面，否则隐藏点菜页面
      })
    }
    this.update()
  },
  // 更新
  update: function(){
    // 点单
    if(this.data.currentTab == 0) {
      var milktea = []
      for (var i = 0; i < base.globalData.milktea.length; i++) {
        console.log(base.globalData.milktea[i])
        var the_index = (String)((Number)(i))
        var tmp = "milktea[" + the_index + "]"
        var tmp1 = tmp + ".id"
        var tmp2 = tmp + ".name"
        var tmp3 = tmp + ".category"
        this.setData({
          [tmp1]: base.globalData.milktea[i].id,
          [tmp2]: base.globalData.milktea[i].category[0].typeName,
          [tmp3]: base.globalData.milktea[i].category
        })
        console.log(base.globalData.milktea[i])
      }
      this.setData({
        currentLeftSelect: "id1",
        eachRightItemToTop: this.getEachRightItemToTop()
      })
    } else if(this.data.currentTab == 1) { // 评价
      wx.request({
        url: 'http://192.168.166.182:8080/comments/getAllComments',
        success: (response) => {
          console.log(response)
          var avg_score = response.data.avg_score; // 后台获取的评分
          var yellow_star = parseInt(avg_score); // 整个黄色五角星的个数
          var star_per = parseFloat(avg_score - yellow_star) * 100; // 一颗灰色五角星中黄色五角星的占比
          var gray_star = parseInt(5 - avg_score); // 整个灰色五角星的数量
          var comments = response.data.comments; // 获取评论信息
          for (var i = 0; i < response.data.comments.length; i++) {
            // 时间格式化
            var d = new Date(comments[i].comTime);
            var y = d.getFullYear();
            var mon = d.getMonth() + 1
            var day = d.getDate();
            var h = d.getHours();//12
            var m = d.getMinutes(); //12
            var s = d.getMinutes();
            if (h < 10) {
              h = "0" + h;
            }
            if (m < 10) {
              m = "0" + m;
            }
            comments[i].comTime = y + '/' + mon + '/' + day + ' ' + h + ':' + m + ':' + s
            // 格式化名字
            comments[i].username = comments[i].username.replace(/"/g, '')
          }
          this.setData({   
            avg_score: avg_score, //评分数       
            yellow_star: yellow_star,
            star_per: star_per,
            gray_star: gray_star,
            comments: comments //评论信息
          })
        },
        fail: (error) => {
          console.log(error)
        }
      })
    }
  },
  // 生命周期函数--监听页面显示
  onShow: function () {
    this.update()
  },
  // 生命周期函数--监听页面加载
  onload:function(e){
    this.update()
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {

  },
// 生命周期函数--监听页面隐藏
  onHide: function () {

  },
  // 生命周期函数--监听页面卸载
  onUnload: function () {

  },
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {

  },
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {

  },
  // 用户点击右上角分享
  onShareAppMessage: function () {

  }
})